<template>
  <div v-loading="listLoading">
    <el-table
      v-if="listData.items.length"
      ref="legalTableRef"
      :data="listData.items"
      :header-cell-style="handleTheadStyle"
      class="fb-table"
      header-cell-class-name="order-data-header-cell"
      element-loading-text="加载中..."
      fit
      hightlight-current-rowref="tableRef"
      hightlight-current-row
      @sort-change="sortMethod"
    >
      <template v-for="column in tableColumn">
        <el-table-column :key="column.key" :sortable="column.sortable" :label="column.label" :min-width="column.minWidth" :prop="column.key" :align="column.align || 'left'" >
          <template slot-scope="scope">
            <template v-if="column.key === 'orderPlatform'">
              <div class="flex-center">
                <template v-if="scope.row.orderPlatform">
                  <platformIcon :data="scope.row.orderPlatform" />
                  {{ scope.row.orderPlatform }}
                </template>
                <template v-else>--</template>
              </div>
            </template>
            <template v-else-if="column.key === 'resourceOrProject'">
              <ToolTip :content="getRenderContent(scope.row)"/>
            </template>
            <template v-else-if="column.key === 'updater'">
              <CheckUserInfo :user-id="scope.row.updaterId" :label="scope.row.updater" />
            </template>
            <template v-else-if="column.key === 'updater'">
              <CheckUserInfo :user-id="scope.row.updaterId" :label="scope.row.updater" />
            </template>
            <template v-else-if="column.key === 'creater'">
              <CheckUserInfo :user-id="scope.row.createrId" :label="scope.row.creater" />
            </template>
            <template v-else-if="column.key === 'allocationRatio'">
              <div class="flex-center ratio-cell">
                {{ scope.row['allocationRatio'] + '%' || '--' }}
              </div>
            </template>
            <template v-else-if="timeTypeKey.includes(column.key)">
              <div class="flex-center">
                <template v-if="scope.row[column.key]">
                  {{ scope.row[column.key] | standardFormatTime('YYYY/MM/DD') }}
                </template>
                <template v-else>--</template>
              </div>
            </template>
            <template v-else-if="preciseTimeKey.includes(column.key)">
              <div class="flex-center">
                <template v-if="scope.row[column.key]">
                  {{ scope.row[column.key] | standardFormatTime('YYYY/MM/DD HH:mm') }}
                </template>
                <template v-else>--</template>
              </div>
            </template>
            <template v-else>
              <el-tooltip v-if="scope.row[column.key]" :open-delay="800" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ scope.row[column.key] }}</div>
                <div class="ellipsisOne">{{ scope.row[column.key] }}</div>
              </el-tooltip>
              <div v-else>--</div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="!listData.items.length" class="empty-table-data">
      <template v-if="isEmptyTable">
        <img :src="emptyTableDataImg" >
        <div style="margin-top: 16px">还没有添加任何内容噢～</div>
        <div>可点击[<span style="color: #406EFF; cursor: pointer" @click="$emit('showUserInfoDialog')">查看人员</span>]，给小伙伴发送通知</div>
      </template>
      <template v-else>
        <img :src="EmptyImg" >
        <div style="margin-top: 16px">暂无数据</div>
      </template>
    </div>
    <fixed-pagination v-if="false" v-show="listData.total > 0">
      <span style="flex:1;"/>
      <el-pagination
        :current-page="listData.page"
        :page-size="listData.perPage"
        :total="listData.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </fixed-pagination>
  </div>
</template>
<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import platformIcon from '@/components/Common/platformIcon';
import emptyTableDataImg from '@/assets/empty-table-data.png';
import EmptyImg from '@/assets/empty-table-data.png';
import { standardFormatTime } from '@/filters/date';
export default {
  name: 'DetailTable',
  filters: {
    standardFormatTime
  },
  components: {
    EmptyPlaceholder,
    platformIcon
  },
  props: {
    listLoading: {
      type: Boolean,
      default: false
    },
    isEmptyTable: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Object | Array,
      default: () => {
        return {
          items: [],
          page: 0,
          perPage: 0,
          total: 0
        };
      }
    }
  },
  data() {
    return {
      EmptyImg,
      emptyTableDataImg,
      sortKeys: { // 排序规则
        orderPlatform: null,
        resourceName: null,
        userName: null,
        allocationRatio: null,
        attributionMatrix: null,
        entryTime: null,
        dimissionTime: null,
        transferTime: null,
        updateTime: null,
        createTime: null
      },
      sequenceKeys: [] // 顺序栈
    };
  },
  computed: {
    tableColumn() {
      return [
        { key: 'energyType', minWidth: '130', label: '精力类型' },
        { key: 'orderPlatform', minWidth: '130', label: `下单平台${this.getLabelWeight('orderPlatform')}`, sortable: 'custom' },
        { key: 'resourceOrProject', minWidth: '180', label: `账号/项目名称${this.getLabelWeight('resourceName')}`, sortable: 'custom' },
        { key: 'userName', minWidth: '115', label: `运营人员${this.getLabelWeight('userName')}`, sortable: 'custom' },
        { key: 'allocationRatio', minWidth: '145', label: `精力分配比例${this.getLabelWeight('allocationRatio')}`, sortable: 'custom', align: 'right' },
        { key: 'attributionMatrix', minWidth: '130', label: `所属经营体${this.getLabelWeight('attributionMatrix')}`, sortable: 'custom' },
        { key: 'remark', minWidth: '100', label: '备注' },
        { key: 'entryTime', minWidth: '115', label: `入职时间${this.getLabelWeight('entryTime')}`, sortable: 'custom' },
        { key: 'dimissionTime', minWidth: '115', label: `离职时间${this.getLabelWeight('dimissionTime')}`, sortable: 'custom' },
        { key: 'transferTime', minWidth: '115', label: `调岗时间${this.getLabelWeight('transferTime')}`, sortable: 'custom' },
        { key: 'updater', minWidth: '90', label: '更新人' },
        { key: 'updateTime', minWidth: '160', label: `更新时间${this.getLabelWeight('updateTime')}`, sortable: 'custom' },
        { key: 'creater', minWidth: '90', label: '创建人' },
        { key: 'createTime', minWidth: '160', label: `创建时间${this.getLabelWeight('createTime')}`, sortable: 'custom' }
      ];
    },
    indexTag() {
      return {
        0: '①', 1: '②', 2: '③', 3: '④', 4: '⑤',
        5: '⑥', 6: '⑦', 7: '⑧', 8: '⑨', 9: '⑩'
      };
    },
    timeTypeKey() {
      return ['entryTime', 'dimissionTime', 'transferTime'];
    },
    preciseTimeKey() {
      return ['updateTime', 'createTime'];
    }
  },
  methods: {
    handleSizeChange(num) {
      this.$emit('pageSizeChange', num);
    },
    handleCurrentChange(page) {
      this.$emit('curPageChange', page);
    },
    handleTheadStyle({ row, column, rowIndex, columnIndex }) {
      column.order = this.sortKeys[column.property];
    },
    resetTable() { // 点击重置
      this.sequenceKeys = [];
      Object.keys(this.sortKeys).forEach(key => {
        this.sortKeys[key] = null;
      });
    },
    // 获取筛选列权重
    getLabelWeight(label) {
      let index = -1;
      if (this.sequenceKeys.includes(label)) {
        index = this.sequenceKeys.findIndex(key => key === label);
      }
      if (index !== -1) {
        return `${this.indexTag[index]}`;
      }
      return '';
    },
    sortMethod(data) {
      // ascending-正序(0)  descending-倒叙(1)  默认 null
      this.sortKeys[data.prop] = data.order;
      if (data.order) {
        !this.sequenceKeys.includes(data.prop) && this.sequenceKeys.push(data.prop);
      } else {
        const keyIndex = this.sequenceKeys.findIndex(key => key === data.prop);
        keyIndex !== -1 && this.sequenceKeys.splice(keyIndex, 1);
      }
      const result = [];
      this.sequenceKeys.forEach(key => {
        const curSortValue = (this.sortKeys[key] === 'ascending' ? 0 : 1);
        const curRule = key + '-' + curSortValue;
        result.push(curRule);
      });
      this.$emit('sortMethod', result.join(','));
      return result.join(',');
    },
    getRenderContent(row) {
      const energyType = row.energyType;
      return {
        '账号': row['resourceName'] || '--',
        '项目订单': `${row['projectName'] ? `${row['projectName']}(${row['projectNum']})` : '--'}`
      }[energyType] || row['projectType'] || '--';
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__empty-text {
  display: none;
}
::v-deep .el-table__empty-block {
  min-height: 1px;
}
.check-tooltip, .eidt-tooltip, .del-tooltip {
  padding: 5px 10px;
}
.el-table {
  color: #333 !important;
}
.ratio-cell {
  justify-content: flex-end;
  padding-right: 12px;
}
.empty-table-data {
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  color: #999;
  margin-bottom: 20px;
  > img {
    margin-top: 40px;
    width: 120px;
  }
}
</style>
